웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트의 세계관을 이해한다... 제가 너무 좋아하는 문구 중 하나로 읽었던 책 중에서 '자바스크립트를 깨우치다'에 나오는 문구입니다. 생각해보면 요즘은 잘 만들어진 플러그인, 라이브러리가 홍수와 같죠... 사용법만 조금만 안다면 충분히 복잡한 형태의 인터페이스나 애니메이션을 쉽게 구현 할 수 있게되었습니다. 다시 말해 자바스크립트를 (깊게) 이해하지 않아도 레퍼런스만 잘 찾아보면? 원하는 무엇이든 구현할 수 있죠.
! 자바스크립트를 깊히 이해하지 못하면?
하지만 기능상의 구현은 가능하지만 자바스크립트에 대해 깊히 알지 못한다면? 어려운 뭔가를 만들어내면서 실제로 어떻게 동작하는지 알기 어렵습니다. 이는 더 나은 변화, 더 나은 기능 구현에 제약이 따를 수 밖에 없을 것입니다. 다시 말해 일정 수준 이상의 스크립트 개발자는 다다르기 어렵다는 얘기이기도 합니다.
서두가 너무 길었는데 이런 이유로 이해하는 것은 어렵지만 의미있다는 결론입니다. 이제 본론으로 가서.. 아래는 constructor 즉 생성자와 관련된 자바스크립트 프로퍼티입니다.
! constructor는?
constructor속성이 하는 일은 어떤 생성자 객체를 통해 생겨난 인스턴스(instance)인지를 알려주는 역할을 합니다. 즉 생성자 객체를 반환합니다. 예를들어 만약 여러개의 비슷한 인스턴스가 존재한다면 각각 어떤 생성자를 통해 만들어졌는지 constructor 프로퍼티를 사용해 간단히 알 수 있겠죠. 그럼 아래는 간단한 예제를 통해 알아보도록 하겠습니다.
생성자 함수는 새로운 인스턴스, 즉 새로운 객체를 만들 수 있는 함수로 네이티브 생성자 함수 또는 내장 생성자 함수와 구분되는 사용자에 의해 만들어진 생성자 함수를 의미합니다. Employee라는 생성자 함수를 만들고 will이라는 인스턴스를 생성해보겠습니다.
Employee라는 생성자 함수를 사용하면 원하는 만큼 계속해서 인스턴스를 만드는 것이 가능합니다. 여기서는 will이라는 새로운 인스턴스 하나만 생성하였습니다. 이 인스턴스가 어떤 생성자 함수에 의해 생겨났는지 알아내기 위해 constructor 속성을 아래에서 사용해보겠습니다.
will.constructor;
// function Employee(age, division) 출력됨
보시는 것처럼 출력되는 결과는 생성자 함수인 Employee를 알려줍니다. 이처럼 constructor 함수를 확인하여 어떤 생성자함수에 의해 생성되었음을 확인할 수 있습니다.
이처럼 생성자를 확인하는 일은 자주 사용되지는 않지만 여러가지로 활용되기도 합니다. constructor를 사용하면 내장 생성자객체에 의하여 생성되었는지도 확인할 수 있습니다. 예를들어 내장함수인 alert() 함수 역시 constructor를 가지고 있을 것입니다. 한번 알아볼까요?
여기까지 constructor 프로퍼티에 대하여 알아보았습니다.
! 자바스크립트를 깊히 이해하지 못하면?
하지만 기능상의 구현은 가능하지만 자바스크립트에 대해 깊히 알지 못한다면? 어려운 뭔가를 만들어내면서 실제로 어떻게 동작하는지 알기 어렵습니다. 이는 더 나은 변화, 더 나은 기능 구현에 제약이 따를 수 밖에 없을 것입니다. 다시 말해 일정 수준 이상의 스크립트 개발자는 다다르기 어렵다는 얘기이기도 합니다.서두가 너무 길었는데 이런 이유로 이해하는 것은 어렵지만 의미있다는 결론입니다. 이제 본론으로 가서.. 아래는 constructor 즉 생성자와 관련된 자바스크립트 프로퍼티입니다.
! constructor는?
constructor속성이 하는 일은 어떤 생성자 객체를 통해 생겨난 인스턴스(instance)인지를 알려주는 역할을 합니다. 즉 생성자 객체를 반환합니다. 예를들어 만약 여러개의 비슷한 인스턴스가 존재한다면 각각 어떤 생성자를 통해 만들어졌는지 constructor 프로퍼티를 사용해 간단히 알 수 있겠죠. 그럼 아래는 간단한 예제를 통해 알아보도록 하겠습니다.# constructor 속성 예제 소스코드 보기
먼저 간단하게 생성자 함수를 만들고 이 생성자 함수를 통해 인스턴스를 하나 만들어보겠습니다. 이 인스턴스가 어떤 생성자 함수를 사용하여 생겨났는지 constructor를 사용하여 일아보고자합니다. 그럼 임직원에 대한 정보를 담고 있는 생성자 함수를 만들어보죠.생성자 함수는 새로운 인스턴스, 즉 새로운 객체를 만들 수 있는 함수로 네이티브 생성자 함수 또는 내장 생성자 함수와 구분되는 사용자에 의해 만들어진 생성자 함수를 의미합니다. Employee라는 생성자 함수를 만들고 will이라는 인스턴스를 생성해보겠습니다.
Employee = function (age, division) {
this.age = age,
this.division = division;
}
// Employeer 생성자 함수를 생성
will = new Employee(30, 'Development');
// will이라는 인스턴스가 만들어짐
}
// Employeer 생성자 함수를 생성
will = new Employee(30, 'Development');
// will이라는 인스턴스가 만들어짐
Employee라는 생성자 함수를 사용하면 원하는 만큼 계속해서 인스턴스를 만드는 것이 가능합니다. 여기서는 will이라는 새로운 인스턴스 하나만 생성하였습니다. 이 인스턴스가 어떤 생성자 함수에 의해 생겨났는지 알아내기 위해 constructor 속성을 아래에서 사용해보겠습니다.
// function Employee(age, division) 출력됨
보시는 것처럼 출력되는 결과는 생성자 함수인 Employee를 알려줍니다. 이처럼 constructor 함수를 확인하여 어떤 생성자함수에 의해 생성되었음을 확인할 수 있습니다.
이처럼 생성자를 확인하는 일은 자주 사용되지는 않지만 여러가지로 활용되기도 합니다. constructor를 사용하면 내장 생성자객체에 의하여 생성되었는지도 확인할 수 있습니다. 예를들어 내장함수인 alert() 함수 역시 constructor를 가지고 있을 것입니다. 한번 알아볼까요?
alert.constructor
Function() { [native code] } // Function() 생성자 함수임을 확인하였음
Function() { [native code] } // Function() 생성자 함수임을 확인하였음
여기까지 constructor 프로퍼티에 대하여 알아보았습니다.
아래의 글도 찾고 계시지 않나요?